<!-- -->
<template>
  <div class="order">
    <el-container>
      <el-header>
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          title="批量删除"
          @click="deleteAll()"
        >批量删除</el-button>
        <el-input
          placeholder="请输入订单编号"
          v-model="searchOrder"
          class="input-with-select"
          style="width:30%"
        >
        </el-input>

        <el-button
          type="primary"
          icon="el-icon-search"
          title="点击搜索"
          style="margin-left:14px"
          @click="searchOrderList()"
          >点击搜索</el-button
        >
        <el-button
          type="success"
          icon="el-icon-refresh"
          title="点击刷新"
          style="margin-left:14px"
          @click="refresh()"
          >刷新</el-button
        >
      </el-header>
      <el-main>
        <div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <span class="total">共有数据 {{totalSize}} 条</span>
          <template>
            <el-table :data="tableData" style="width: 100%;margin-top:2%;">
              <el-table-column
              align ="center"
              width = "60">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkedId" @change="handleCheckedChange">
                  <el-checkbox :key="scope.row.id" :label="scope.row.id">{{""}}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
              <el-table-column label="订单ID" prop="id"></el-table-column>
              <el-table-column label="买家" prop="username"></el-table-column>
              <el-table-column
                label="下单时间"
                prop="createTime"
              ></el-table-column>
              <el-table-column
                label="支付时间"
                prop="payTime"
              ></el-table-column>
              <el-table-column label="金额" prop="totalMoney"></el-table-column>
              <el-table-column label="备注" prop="remarks"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="
                      (dialogVisible1 = true),
                        handleEdit(scope.$index, scope.row)
                    "
                    >发货</el-button
                  >
                  
                  <!-- sendOut(scope.$index, scope.row.id) -->
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row.id)"
                    >删除</el-button
                  >

                  <el-dialog
                    title="发货"
                    :visible.sync="dialogVisible1"
                    width="30%"
                  >
                    <el-form
                      :label-position="labelPosition"
                      label-width="80px"
                      :model="fixForm"
                    >
                      <el-form-item label="快递公司">
                        <el-row>
                          <el-col :span="20">
                            <el-select v-model="fixForm.companyId">
                              <el-option
                                v-for="item in companyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="快递编号">
                        <el-input
                          v-model="fixForm.number"
                          placeholder="请填写备注"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible1 = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="sendOut()"
                        >确 定</el-button
                      >
                    </span>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="pre" :disabled="preBool">上一页</el-button>
        <el-input
          v-model="pageNum"
          readonly="readonly"
          style="width:60px;"
        ></el-input>
        <el-button @click="add" :disabled="addBool">下一页</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      searchOrder: "",
      select: "",
      dialogVisible: false,
      dialogVisible1: false,
      labelPosition: "right",
      addForm: {
        goodName: "",
        remarks: "",
        count: ""
      },
      tableData: [
        {
          // 订单ID
          id: "12138",
          // 用户Id
          uid: "",
          user_name: "robert",
          // 优惠劵ID
          coupons_id: "",
          // 总价
          total_money: "",
          // 实际价格
          actul_money: "",
          // 订单备注
          remarks: "麻烦发货快点",
          // 状态
          status: "0",
          order_status: "未支付",
          // 创建时间
          create_time: "",
          // 支付时间
          pay_time: "",
          // 完成时间
          finish_time: "",
          // 商品id
          goods_id: "",
          // 购买量
          count: 1,
          goodName: "牛奶"
        }
      ],
      companyList: [
        {
          label: "",
          value: ""
        }
      ],
      fixForm: {
        username: "",
        id: "",
        companyId: "",
        number: ""
      },
      // 分页
      pageNum: 1,
      addBool: false,
      preBool: true,
      pageSize: 10,
      totalPages: "",
      totalSize: "",
      pages: "",

       // 全选
      checkAll: false,
      checkedId: [],
      isIndeterminate: true,
    };
  },
  watch: {
    pageNum: function(Val) {
      if (Val === 1) {
        this.preBool = true;
        this.addBool = false;
      } else if (Val === this.totalPages) {
        this.addBool = true;
        this.preBool = false;
      } else {
        this.preBool = false;
        this.addBool = false;
      }
    }
  },

  created() {
    this.getOrderList();
    this.getComponey();
  },
  components: {},

  filters: {},

  computed: {},

  methods: {
    handleCheckedChange(value = []) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
      console.log(this.checkedId)
    },
    handleCheckAllChange(val) {
      this.checkedId = []
      this.checkAll = val;
      this.isIndeterminate = !val;
      if(this.checkAll) {
        this.tableData.forEach(data => {
          this.checkedId.push(data.id);
        });
      }
      console.log(this.checkedId)
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.fixForm = row;
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteOrder(index, id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      if (this.pageNum < this.totalPages) {
        this.pageNum++;
        this.getOrderList();
      } else {
        this.addBool = true;
      }
    },
    pre() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.getOrderList();
      } else {
        this.preBool = true;
      }
    },
    Success(index) {
      this.$message.success(index);
    },
    Fail(index) {
      this.$message.error(index);
    },
    refresh() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.searchOrder = "";
      this.getOrderList();
    },
    getComponey() {
      this.axios
        .get("/api/deliverCompany")
        .then(res => {
          console.log(res.data.data.list);
          let list = res.data.data.list;
          let bufferList = [];
          for (let i in list) {
            let k = new Object();
            k.label = list[i].name;
            k.value = list[i].id;
            bufferList.push(k);
          }
          this.companyList = bufferList;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getOrderList() {
      this.axios
        .put("/api/orders", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            this.tableData = list.content;
          }else{
            this.totalPages = 0;
            this.totalSize = 0;
            this.tableData = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    searchOrderList() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.axios
        .put("/api/orders", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: Number(this.searchOrder)
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            this.Success("查询成功");
            this.tableData = [];
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            this.tableData = list.content;
          } else {
            this.Fail("查找失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteOrder(index, id) {
      this.axios
        .delete("/api/orders", {
          params: {
            ids: id
          }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            this.Success("删除成功");
            this.tableData.splice(index, 1);
          } else {
            this.Fail("删除失败");
          }
        });
    },
    sendOut() {
      // console.log({
      //       oid: this.fixForm.id,
      //       companyId: this.fixForm.companyId,
      //       number: this.fixForm.number
      //     });
      if (this.fixForm.companyId === "" || this.fixForm.number === "") {
        this.Fail("信息不足，无法发货");
      } else {
        this.axios
          .post("/api/deliver", {
            oid: this.fixForm.id,
            companyId: this.fixForm.companyId,
            number: this.fixForm.number
          })
          .then(res => {
            // console.log(res);
            if(res.data.code===200){
              this.dialogVisible1 = false;
              this.Success("发货成功");
              this.getOrderList();
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    deleteAll() {
      var data = {
        ids: this.checkedId
      }
      var params = this.qs.stringify(data, { indices: false })
      this.axios.delete('/api/orders?'+params
      ).then(response => {
        console.log(response);
        if(response.data.code == 200) {
          this.getOrderList();
          this.Success("删除成功");
        } else {
          this.Fail("删除失败");
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>
<style scoped>
.total {
  font-size: 14px;
  margin-left: 50px;
  color: #606266;
}
.order {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  width: 100%;
  line-height: 60px;
}
.el-main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-footer {
  line-height: 60px;
  text-align: right;
}
.searchBar {
  width: 100%;
  height: 5%;
  /* margin-top: 15px; */
}
.el-input {
  width: 93%;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>